<template>
  <div class="zuo">
    <!-- 运营数据展示区域 -->
    <van-cell-group>
      <van-cell title="运营时长" :value="times"/>
      <van-cell title="接单数" :value="num"/>
      <van-cell title="今日流水" :value="money"/>
      <hr>
      <van-cell title="热力图" @click="toheatMap" is-link/>
      <van-cell title="找附近" @click="toditu" is-link/>
      <van-cell title="偏好设置" is-link/>
    </van-cell-group>

    <!-- 实时单展示区域 -->
    <van-card class="order-card" title="实时单">
      <template #default>
        <div>郎臣大厦 1808 室 - 赛格国际购物中心</div>
        <div>备注: 订单备注订单备注</div>
        <div>距您 5.93km 预估 33.81</div>
      </template>
    </van-card>

    <!-- 预约单展示区域 -->
    <van-card class="order-card" title="预约单">
      <template #default>
        <div>明天 8:30</div>
        <div>郎臣大厦 1808 室 - 赛格国际购物中心</div>
        <div>备注: 订单备注订单备注</div>
        <div>距您 502km 预住 听单中...</div>
      </template>
    </van-card>

    <hr>

    <!-- 按钮区域 -->
    <van-button type="primary" block>听单中</van-button>
    <van-button type="default" block @click="toShouye">休息</van-button>
    <van-button type="warning" block>刷新</van-button>
  </div>
</template>

<script>
// 定义路由相关常量
import axios from "axios";

const ROUTE_HEAT_MAP = '/heatMap';
const ROUTE_HEAT_MAPS = '/heatMaps';
const ROUTE_SHOUYE = '/shouye';

export default {
  data() {
    return {
      num: "",
      driverInfo: {},
      tel: '',
      money: "",
      times: "",
    };
  },
  methods: {
    // 根据手机号查询到司机id
    async findDriverByTel() {
      const tel = JSON.parse(localStorage.getItem('login'));
      const response = await axios.post('personal/personal/findByTel?tel=' + tel);
      this.driverInfo = response.data;
      console.log(this.driverInfo);
      return this.driverInfo;
    },
    // 根据id查询订单数
    async jiedanshu() {
      if (!this.driverInfo.id) {
        console.error('司机信息未获取到，无法查询订单数');
        return;
      }
      const response = await axios.post(`order/order/jiedanNum?id=${this.driverInfo.id}`);
      this.num = response.data;
    },
    // 根据司机查流水
    async liushui() {
      if (!this.driverInfo.id) {
        console.error('司机信息未获取到，无法查询流水');
        return;
      }
      const response = await axios.post(`order/order/liushuimoney?id=${this.driverInfo.id}`);
      this.money = response.data;
    },
    // 根据司机id查询运营时长
    async yunyingshichang() {
      if (!this.driverInfo.id) {
        console.error('司机信息未获取到，无法查询运营时长');
        return;
      }
      const response = await axios.post(`order/order/yunyingshichang?id=${this.driverInfo.id}`);
      this.times = response.data;
    },
    toheatMap() {
      this.$router.push(ROUTE_HEAT_MAP);
    },
    toditu() {
      this.$router.push(ROUTE_HEAT_MAPS);
    },
    toShouye() {
      this.$router.push(ROUTE_SHOUYE);
    },
  },
  async created() {
    try {
      const driverInfo = await this.findDriverByTel();
      await this.jiedanshu();
      await this.liushui();
      await this.yunyingshichang();
    } catch (error) {
      console.error('页面初始化数据获取失败：', error);
    }
  },
};
</script>

<style scoped>
.zuo {
  text-align: left;
}

/* 订单卡片样式 */
.order-card {
  margin-bottom: 10px;
}
</style>
